<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0; 
            padding: 0; 
            text-align: center;
        }
        table{
            width: 600px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
        <h1>2107班 学生管理系统</h1>
        <div>
            姓名：<input type="text" id="nickname">
            <br>
            手机号：<input type="text" id="phone">
            <br>
            性别：<input type="radio" class="sex" checked name="sex" value="男">男
            <input type="radio"  class="sex"  name="sex" value="女">女
            <br>
            爱好：<input type="checkbox" class="ck" value="吃">吃
                  <input type="checkbox" class="ck" value="女">女
                  <input type="checkbox" class="ck" value="男">男
                  <input type="checkbox" class="ck" value="炸雷">炸雷
           <br>
           <button id="add">添加</button>
        </div>
        <div>
            <table border="1">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>姓名</th>
                        <th>手机号</th>
                        <th>性别</th>
                         <th>爱好</th>
                         <th>操作</th>
                    </tr>
                </thead>
                <tbody id="tbody">
                    <!-- <tr>
                        <td>12462234234</td>
                        <td>彭政</td>
                        <td>17555555555</td>
                        <td>男</td>
                        <td>女，炸雷</td>
                        <td>
                            <a href="#">删除</a>
                        </td>
                    </tr> -->
                </tbody>
            </table>
        </div>
        <script>
                // 将表单中的值收集成一个对象 添加到localStorage的数组中
                if(!localStorage.grade2107){
                    localStorage.grade2107="[]"
                }
                var add=document.querySelector("#add");//添加按钮
                var tbody=document.querySelector("#tbody");//tbody
                var phone=document.querySelector("#phone");//手机号
                var nickname=document.querySelector("#nickname");//昵称
                // 点击添加按钮
                add.onclick=function(){
                        // 收集性别
                        var sexs=document.querySelectorAll(".sex"); //俩个性别复选框
                        var sexStr= sexs[0].checked ?  "男"  :  "女"
                        // 爱好的收集   
                        var cks=document.querySelectorAll(".ck");
                        var arr=[];
                        for(var i=0;i<cks.length;i++){
                            if(cks[i].checked){ //如果当前复选框是真  将值push到arr中
                                arr.push(cks[i].value)
                            }
                        }
                        // 收集好要添加到localStorage的数据
                        var obj={
                            id:new Date().getTime(),
                            nick:nickname.value, //昵称
                            phone:phone.value, //手机号
                            sex:sexStr,
                            aihao:arr
                        }
                        // 1.//取出localStorage的数组 变为可用的数组
                        var arr=JSON.parse(localStorage.grade2107);
                        //2.添加新的内容
                        arr.push(obj)
                        // 3.//把添加后的数组 转为字符串 从新设置回localStorage
                        localStorage.grade2107=JSON.stringify(arr)
                        // 添加后调用渲染函数
                        loadList()
                }   
            // 添加完成后  取出localStorage 数据  循环渲染
            // 渲染方法  
            
            function loadList(){
                // 取出localStorage的数组  渲染成列表
                var arr=JSON.parse(localStorage.grade2107);
                var str=``
                for(var i=0;i<arr.length;i++){
                    str+=`
                        <tr>
                            <td>${arr[i].id}</td>
                            <td>${arr[i].nick}</td>
                            <td>${arr[i].phone}</td>
                            <td>${arr[i].sex}</td>
                            <td>${arr[i].aihao}</td>
                            <td>
                                <a href="#" onclick="del(${arr[i].id})">删除</a>
                            </td>
                        </tr>
                    `
                }
                // 用localStorage中的数据 生成的多个tr 统一的赋值给tbody
                tbody.innerHTML=str;
            }
            loadList()


            // 删除方法
            //  通过id 去localStorage的数组中 查找到对应的数据 并删除

            function del(id){
                    console.log(id)
                    // 1.取出localStroage 的所有数据
                    var arr=JSON.parse(localStorage.grade2107);
                    //2. 循环整个数组 对比数据
                    arr.forEach(function(item,index){
                            // item 数组的每一项   index 数组的下标
                            if(id==item.id){ //当前要删除的id 和数组中的某一项的id相等
                                // 删除本项
                                arr.splice(index,1);
                            }
                    })
                    // 将删除后的数组设置回localStorage 
                    localStorage.grade2107=JSON.stringify(arr)
                    // 删除后  从新渲染列表
                    loadList();
            }




        </script>
</body>
</html>